Loading EXIF data...

Astro Lhasa 是一款简洁、响应式、无障碍友好、并具备良好 SEO 的 Astro 博客主题

该主题基于 Astro Paper，并借鉴了好大哥 Fooleap 博客的布局设计

特性

  • 极快的加载性能
  • 内置 SEO 优化
  • 多语言支持（i18n）
  • 支持 Markdown、Mdx
  • 无障碍支持（键盘/旁白）
  • 响应式设计（适配手机到桌面）
  • 本地模糊搜索
  • 草稿文章与置顶
  • GLightbox 图片灯箱
  • 超链接将会在新标签页打开
  • 自动生成 sitemap 与 RSS
  • Expressive Code 代码高亮
  • 全站懒加载滚动分页、返回顶部按钮
  • 基于时间的明暗模式切换（自动适应系统主题）
  • 深度适配 Artalk 评论系统（布局结构和主题配色）
  • 自动展开和折叠的文章目录（可在文章中配置开关）
  • 为 img 标签自动添加原始宽高，支持缓存
  • 图片美化：EXIF 样式、Alt 标签（长条与角标）
  • 图片懒加载，且 src 只需要输入文件名，编译时自动补全路径

Lighthouse 评分

Loading EXIF data...

项目结构

/
├── public/
│   ├── assets/
│   └── pagefind/ # auto-generated when build
├── posts/
│   ├── life
│   └── technology
│       └── 2025-11-25-introducing-astro-lhasa-1-0.mdx
├── src/
│   ├── assets/
│   │   ├── icons/
│   │   └── images/
│   ├── components/
│   ├── i18n/
│   ├── layouts/
│   ├── pages/
│   ├── styles/
│   ├── utils/
│   ├── config.ts
│   ├── constants.ts
│   └── content.config.ts
├── ecosystem.config.cjs
└── astro.config.ts

Astro 会根据 src/pages/ 中的 .astro、.md、.mdx 文件自动生成路由

静态资源（如图片）可以放在 public

博客文章都放在 posts 下，创建文件夹后，按照文件夹名自动分类文章

技术栈

主要框架 - Astro 5
语言与类型 - TypeScript
样式 - Tailwind CSS v4（@tailwindcss/vite、@tailwindcss/typography）
代码高亮 - Astro Expressive Code（行号、可折叠段落）
Markdown/MDX 扩展 - remark-math、rehype-katex、rehype-figure、rehype-slug、rehype-autolink-headings、rehype-external-links、rehype-wrap-all、@ziteh/rehype-img-size-cache
静态搜索 - Pagefind Default UI
图片灯箱 - GLightbox
OG 图像 - Satori + Resvg（站点与文章均支持）
构建优化 - astro-compressor、@zokki/astro-minify
友联订阅 - RSS Lhasa
评论系统 - Artalk ui
部署 - Docker/Nginx/Pm2（含 Dockerfile、docker-compose.yml、ecosystem.config.cjs）
代码规范 - ESLint 9 + Prettier 3

使用方法

启动项目：

pnpm install
pnpm run dev

也可以使用 Docker：

docker build -t astropaper .
docker run -p 4321:80 astropaper

Google 网站验证

你可以通过环境变量轻松在 Astro Lhasa 中添加 Google 网站验证 HTML 标签

# 在你的环境变量文件 (.env) 中
PUBLIC_GOOGLE_SITE_VERIFICATION=your-google-site-verification-value

命令

所有命令都在项目的根目录下，通过终端运行

CommandAction
pnpm install安装依赖
pnpm run dev启动本地开发服务器，访问地址为 localhost:4321
pnpm run build构建生产环境网站到 ./dist/
pnpm run preview在部署之前预览本地构建
pnpm run format:check检查代码格式是否符合 Prettier 标准
pnpm run format使用 Prettier 格式化代码
pnpm run sync为所有 Astro 模块生成 TypeScript 类型 Learn more
pnpm run lint使用 ESLint 进行代码检查
docker compose up -d使用 Docker 运行 Astro Lhasa，你可以通过在 dev 命令中提供的相同主机名和端口访问
docker compose run app npm install你可以在 Docker 容器内运行上述任何命令
docker build -t astrolhasa .构建 Docker 镜像
docker run -p 4321:80 astrolhasa在 Docker 中运行 Astro Lhasa，网站将在 http://localhost:4321 上可访问
pm2 start ecosystem.config.cjs使用 Pm2 启动 Astro Lhasa，访问地址为 localhost:4321

警告！Windows PowerShell 用户可能需要安装 concurrently，如果想在开发过程中运行诊断命令（例如：astro check —watch & astro dev）

License

本项目采用 Anti 996 License 授权协议发布，详情请查阅 LICENSE

读苏轼有感（1）